<template>
  <div id="artists-list">
    <div
      v-for="(item, index) in artistsList"
      :key="index"
      @click="handleArtistsClick(item)">
      <div class="img">
        <img :src="item.img1v1Url" @load="imgLoad">
      </div>
      <div class="name">
        {{ item.name }}
        <div class="account-page iconfont icon-yonghu"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from 'utils'

export default {
  name: 'ArtistsList',
  data () {
    return {
      imgLoadDebounce: null
    }
  },
  props: {
    artistsList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  created () {
    this._getDebounce()
  },
  methods: {
    // 1. 获取防抖函数
    _getDebounce () {
      this.imgLoadDebounce = debounce(() => {
        this.$emit('imgLoad')
      })
    },
    // 2. 图片加载触发
    imgLoad () {
      this.imgLoadDebounce()
    },
    // 3. 点击歌手头像进入详情页
    handleArtistsClick (item) {
      this.$emit('handleArtistsClick', item.id)
    }
  }
}
</script>

<style scoped lang="less">
#artists-list {
  user-select: none;
  width: 100%;
  min-height: calc(100% - 210px);
  display: flex;
  flex-wrap: wrap;
  > div {
    cursor: pointer;
    margin-bottom: 70px;
    margin-right: 20px;
    width: calc(calc(100% - 80px) / 5);
    .img {
      position: relative;
      padding-top: 100%;
      width: 100%;
      img {
        position: absolute;
        top: 0;
        border: 1px solid #d7d5d6;
        width: 100%;
        height: 100%;
      }
    }
    .name {
      height: 0;
      position: relative;
      top: 5px;
      .account-page {
        position: absolute;
        top: -1px;
        right: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #eabdbd;
        text-align: center;
        color: #c62f2f;
        &:hover {
          background-color: #e8e8e8;
        }
      }
    }
    &:nth-of-type(5n) {
      margin-right: 0;
    }
  }
  // background-color: red;
}
</style>
